例題3 変数を使ったアニメーション

code:ex03.js

正方形をを横に連続に描く

let x = 0;

let y = 0;

let w, h;

function setup() {

createCanvas(800, 600);

colorMode(RGB,255,255,255,1);

frameRate(10);

}

function draw() {

//background(220);

rect(x, y, w, h); // x,y を左上端とし、そこから幅 w 、高さ h の四角形を描く。

}

上のプログラムにはエラーがあります。さてどこでしょうか？

ヒント：変数は使用するときには必ず値が設定されていないとエラーになります。

rect(x, y, w, h)

x,y を左上端とし、そこから幅 w 、高さ h の四角形を描く関数。

注：defaultではrectMode(CORNER)

rectMode(mode)

rectMode(CORNER) ：最初の2つのパラメータは四角形の左上端の x と y 座標、3,4 番目のパラメータは幅と高さ。

rectMode(CORNERS) ：最初の2つのパラメータは四角形の左上端の x と y 座標、3,4 番目のパラメータはその四角形の右下端の x と y 座標。

rectMode(CENTER) ：最初の2つのパラメータは中心の x と y 座標、3,4 番目のパラメータは幅と高さ。

rectMode(RADIUS) ：最初の2つのパラメータは中心の x と y 座標、3,4 番目のパラメータは幅/2と高さ/2。

circleやellipseの場合とはdefault のモードが違うので2つを重ねて書くときに不便なことがある。その時はどちらかに統一すると良い。例えばcircleのdefult CENTER に統一する場合はrectMode(CENTER)とするとよい。

問題 porg02

問１．四角形の幅と高さを100にして、エラーをなくしましょう。

問２. その四角形を左端から右側に動かしてみましょう。動く幅は30ピクセルにしてください。